<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站留言列表样式展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #818cf8;
            --primary-dark: #3730a3;
            --secondary: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --danger: #ef4444;
            --warning: #f59e0b;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f1f5f9;
            line-height: 1.6;
            padding: 30px 0;
            color: var(--dark);
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 40px;
            color: var(--dark);
        }
        
        .comment-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            margin-bottom: 30px;
            overflow: hidden;
        }
        
        .comment-header {
            padding: 15px 20px;
            background-color: var(--primary);
            color: white;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .comment-content {
            padding: 20px;
        }
        
        .comment-description {
            padding: 15px 20px;
            background-color: #f8fafc;
            border-top: 1px solid var(--light-gray);
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        /* 留言样式基础 */
        .comment {
            padding: 15px 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .comment:last-child {
            border-bottom: none;
        }
        
        .comment-header-info {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
            object-fit: cover;
        }
        
        .comment-author {
            font-weight: 600;
            margin-right: 10px;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .comment-text {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
            font-size: 0.9rem;
        }
        
        .comment-action {
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        /* 带图片的留言 */
        .comment-with-media {
            margin-top: 10px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .comment-images {
            display: flex;
            gap: 5px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        
        .comment-image {
            width: 100px;
            height: 100px;
            border-radius: 6px;
            object-fit: cover;
        }
        
        /* 嵌套回复样式 */
        .comment-replies {
            margin-left: 50px;
            margin-top: 10px;
        }
        
        .reply {
            padding: 10px 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .reply:last-child {
            border-bottom: none;
        }
        
        /* 留言输入框样式 */
        .comment-input {
            margin-top: 20px;
        }
        
        .comment-input textarea {
            width: 100%;
            border: 1px solid var(--light-gray);
            border-radius: 8px;
            padding: 10px 15px;
            resize: none;
            margin-bottom: 10px;
            transition: var(--transition);
        }
        
        .comment-input textarea:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        
        .input-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .input-tools {
            display: flex;
            gap: 15px;
            color: var(--gray);
        }
        
        .input-tool {
            cursor: pointer;
            transition: var(--transition);
        }
        
        .input-tool:hover {
            color: var(--primary);
        }
        
        .btn-post {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 6px 16px;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .btn-post:hover {
            background-color: var(--primary-dark);
        }
        
        /* 带点赞和热度的留言 */
        .comment-stats {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 8px;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .comment-stat {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .hot-comment {
            display: inline-block;
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 8px;
        }
        
        /* 带标签的留言 */
        .comment-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        
        .comment-tag {
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">社交网站留言列表样式展示</h1>
        
        <!-- 1. 基础留言列表 -->
        <div class="comment-card">
            <div class="comment-header">
                <i class="fas fa-comment"></i>
                <span>基础留言列表</span>
            </div>
            <div class="comment-content">
                <!-- 留言1 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">李小明</span>
                            <span class="comment-time">2小时前</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        这个想法非常棒！我完全同意你的观点，特别是关于社区建设的部分，我觉得我们可以进一步讨论具体的实施方案。
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i> 回复
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                </div>
                
                <!-- 留言2 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">张小红</span>
                            <span class="comment-time">5小时前</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        我有一些不同的看法，可能我们需要从另一个角度来考虑这个问题。首先，用户体验是关键，但同时我们也要考虑到技术实现的难度和成本。
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i> 回复
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="分享你的想法..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-at"></i>
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="comment-description">
                <p><strong>应用场景：</strong> 适用于大多数社交平台的基础留言功能，如文章评论、动态回复等。</p>
                <p><strong>特点：</strong> 简洁清晰的布局，包含用户信息、留言内容、时间和基本操作按钮；底部配有留言输入框。</p>
            </div>
        </div>
        
        <!-- 2. 带图片的留言列表 -->
        <div class="comment-card">
            <div class="comment-header">
                <i class="fas fa-images"></i>
                <span>带图片的留言列表</span>
            </div>
            <div class="comment-content">
                <!-- 留言1 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">王大力</span>
                            <span class="comment-time">昨天 14:30</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        分享几张昨天活动的照片，大家玩得都很开心！期待下次再聚~
                    </div>
                    <div class="comment-images">
                        <img src="https://picsum.photos/id/26/300/200" alt="活动照片1" class="comment-image">
                        <img src="https://picsum.photos/id/28/300/200" alt="活动照片2" class="comment-image">
                        <img src="https://picsum.photos/id/29/300/200" alt="活动照片3" class="comment-image">
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞 (24)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i> 回复 (5)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                </div>
                
                <!-- 留言2 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/25/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">刘小美</span>
                            <span class="comment-time">昨天 10:15</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        新买的相机到了，试拍了几张，大家觉得效果怎么样？
                    </div>
                    <div class="comment-images">
                        <img src="https://picsum.photos/id/65/300/200" alt="摄影作品" class="comment-image">
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞 (18)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i> 回复 (3)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="分享你的想法或图片..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-at"></i>
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="comment-description">
                <p><strong>应用场景：</strong> 适用于需要分享图片的社交互动场景，如活动回顾、作品展示、生活分享等。</p>
                <p><strong>特点：</strong> 在基础留言功能上增加图片展示区域；支持多张图片缩略图展示；保持简洁的视觉风格。</p>
            </div>
        </div>
        
        <!-- 3. 带嵌套回复的留言列表 -->
        <div class="comment-card">
            <div class="comment-header">
                <i class="fas fa-reply-all"></i>
                <span>带嵌套回复的留言列表</span>
            </div>
            <div class="comment-content">
                <!-- 主留言 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">李小明</span>
                            <span class="comment-time">3天前</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        大家觉得这个新功能怎么样？我个人觉得操作起来还是有点复杂，希望能简化一下步骤。
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞 (32)
                        </div>
                        <div class="comment-action reply-toggle">
                            <i class="far fa-comment"></i> 回复 (8)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                    
                    <!-- 嵌套回复 -->
                    <div class="comment-replies">
                        <!-- 回复1 -->
                        <div class="reply">
                            <div class="comment-header-info">
                                <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="comment-avatar">
                                <div>
                                    <span class="comment-author">张小红</span>
                                    <span class="comment-time">3天前</span>
                                </div>
                            </div>
                            <div class="comment-text">
                                <span class="text-primary">@李小明</span> 我也觉得，特别是在上传图片的时候，步骤太多了。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action">
                                    <i class="far fa-heart"></i> 点赞 (5)
                                </div>
                                <div class="comment-action">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                        </div>
                        
                        <!-- 回复2 -->
                        <div class="reply">
                            <div class="comment-header-info">
                                <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                                <div>
                                    <span class="comment-author">王大力</span>
                                    <span class="comment-time">2天前</span>
                                </div>
                            </div>
                            <div class="comment-text">
                                <span class="text-primary">@李小明</span> 我觉得还好，可能是你还没习惯吧。不过确实有简化的空间。
                            </div>
                            <div class="comment-actions">
                                <div class="comment-action">
                                    <i class="far fa-heart"></i> 点赞 (2)
                                </div>
                                <div class="comment-action">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                        </div>
                        
                        <!-- 回复输入框 -->
                        <div class="comment-input">
                            <textarea rows="2" placeholder="回复 @李小明..."></textarea>
                            <div class="input-actions">
                                <div class="input-tools">
                                    <div class="input-tool">
                                        <i class="far fa-image"></i>
                                    </div>
                                    <div class="input-tool">
                                        <i class="far fa-smile"></i>
                                    </div>
                                </div>
                                <button class="btn-post">回复</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="分享你的想法..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-at"></i>
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="comment-description">
                <p><strong>应用场景：</strong> 适用于需要多层互动的社交讨论场景，如论坛帖子、话题讨论、产品反馈等。</p>
                <p><strong>特点：</strong> 支持留言下的嵌套回复；回复内容有缩进，视觉层次清晰；支持@提及功能；可单独对回复进行互动。</p>
            </div>
        </div>
        
        <!-- 4. 带点赞和热度的留言列表 -->
        <div class="comment-card">
            <div class="comment-header">
                <i class="fas fa-fire-alt"></i>
                <span>带点赞和热度的留言列表</span>
            </div>
            <div class="comment-content">
                <!-- 热门留言 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/25/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">刘小美</span>
                            <span class="hot-comment">热门</span>
                            <span class="comment-time">1周前</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        我总结了几点关于这个问题的解决方案，希望能帮到大家：
                        <br>1. 首先检查网络连接是否正常
                        <br>2. 清除浏览器缓存后重试
                        <br>3. 更新到最新版本的应用
                        <br>4. 如仍有问题，联系客服并提供错误截图
                    </div>
                    <div class="comment-stats">
                        <div class="comment-stat">
                            <i class="far fa-thumbs-up"></i> 有用 (128)
                        </div>
                        <div class="comment-stat">
                            <i class="far fa-comment"></i> 回复 (36)
                        </div>
                        <div class="comment-stat">
                            <i class="far fa-eye"></i> 浏览 (542)
                        </div>
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞 (215)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i> 回复
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                </div>
                
                <!-- 普通留言 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">王大力</span>
                            <span class="comment-time">6天前</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        非常感谢分享！我按照你的方法解决了困扰我很久的问题，特别是清除缓存那个步骤，太有用了！
                    </div>
                    <div class="comment-stats">
                        <div class="comment-stat">
                            <i class="far fa-thumbs-up"></i> 有用 (42)
                        </div>
                        <div class="comment-stat">
                            <i class="far fa-comment"></i> 回复 (8)
                        </div>
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞 (78)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i> 回复
                        </div>
                        <div class="comment-action">
                            <i class="far fa-share-square"></i> 分享
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="分享你的想法..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-at"></i>
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="comment-description">
                <p><strong>应用场景：</strong> 适用于需要突出优质内容的社交平台，如问答社区、知识分享、产品反馈等。</p>
                <p><strong>特点：</strong> 显示点赞数、回复数和浏览量等数据；可标记热门或优质留言；支持"有用"投票功能，帮助识别高质量内容。</p>
            </div>
        </div>
        
        <!-- 5. 带标签的留言列表 -->
        <div class="comment-card">
            <div class="comment-header">
                <i class="fas fa-tags"></i>
                <span>带标签的留言列表</span>
            </div>
            <div class="comment-content">
                <!-- 留言1 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">李小明</span>
                            <span class="comment-time">2天前</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        推荐几部最近看的好电影，剧情和制作都很出色，强烈建议大家看看！
                    </div>
                    <div class="comment-tags">
                        <span class="comment-tag">电影推荐</span>
                        <span class="comment-tag">剧情片</span>
                        <span class="comment-tag">2023</span>
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞 (45)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i> 回复 (12)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-bookmark"></i> 收藏
                        </div>
                    </div>
                </div>
                
                <!-- 留言2 -->
                <div class="comment">
                    <div class="comment-header-info">
                        <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="comment-avatar">
                        <div>
                            <span class="comment-author">张小红</span>
                            <span class="comment-time">1天前</span>
                        </div>
                    </div>
                    <div class="comment-text">
                        分享一些提高工作效率的小技巧，亲测有效，适合经常需要处理大量信息的朋友。
                    </div>
                    <div class="comment-tags">
                        <span class="comment-tag">效率工具</span>
                        <span class="comment-tag">工作技巧</span>
                        <span class="comment-tag">时间管理</span>
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i> 点赞 (89)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i> 回复 (23)
                        </div>
                        <div class="comment-action">
                            <i class="far fa-bookmark"></i> 收藏
                        </div>
                    </div>
                </div>
                
                <!-- 留言输入框 -->
                <div class="comment-input">
                    <textarea rows="3" placeholder="分享你的想法..."></textarea>
                    <div class="input-actions">
                        <div class="input-tools">
                            <div class="input-tool">
                                <i class="far fa-image"></i>
                            </div>
                            <div class="input-tool">
                                <i class="far fa-smile"></i>
                            </div>
                            <div class="input-tool">
                                <i class="fas fa-tag"></i>
                            </div>
                        </div>
                        <button class="btn-post">发表留言</button>
                    </div>
                </div>
            </div>
            <div class="comment-description">
                <p><strong>应用场景：</strong> 适用于内容分类明确的社交平台，如兴趣社区、分享型论坛、专业讨论组等。</p>
                <p><strong>特点：</strong> 支持为留言添加标签，便于内容分类和检索；标签可点击筛选同类内容；适合知识分享和兴趣讨论场景。</p>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 留言交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            document.querySelectorAll('.comment-action i.far.fa-heart, .comment-action i.far.fa-thumbs-up').forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.classList.toggle('far');
                    this.classList.toggle('fas');
                    this.classList.toggle('text-danger');
                    
                    // 更新点赞数
                    const parent = this.closest('.comment-action');
                    if (parent.textContent.includes('(')) {
                        let countText = parent.textContent.trim();
                        let count = parseInt(countText.match(/\d+/)[0]);
                        if (this.classList.contains('fas')) {
                            count++;
                        } else {
                            count--;
                        }
                        parent.innerHTML = this.outerHTML + ' ' + parent.textContent.trim().replace(/\d+/, count);
                    }
                });
            });
            
            // 回复折叠/展开
            document.querySelectorAll('.reply-toggle').forEach(toggle => {
                toggle.addEventListener('click', function() {
                    const replies = this.closest('.comment').querySelector('.comment-replies');
                    if (replies) {
                        replies.style.display = replies.style.display === 'none' ? 'block' : 'none';
                    }
                });
            });
        });
    </script>
</body>
</html>
    
